<template>
  <div class="pc-profile">
    <div class="top">
      <div class="banner">
        <img src="../assets/setting.png" alt="">
      </div>
      <div class="avatar-and-profile">
        <div class="avatar">
          <img src="../assets/img.jpg" alt="">
        </div>
        <div class="profile">
          <div class="profile1">
            <div class="name flex-center">小彭同学</div>
            <div class="work flex-center">前端</div>
          </div>
          <div class="profile2">
            <div class="school">
              <a-icon type="home" />
              天津理工大学
            </div>
            <div class="sex">

            </div>
          </div>
          <div class="tips" v-show="isShowTips">
            <a-icon type="tags" />
            大家好，我是蔡徐坤
          </div>
          <div class="more-info small-hand" v-if="!isShowTips" @click="isShowTips=true">
            <a-icon type="down" />
            查看更多信息
          </div>
          <div class="close-info small-hand" v-if="isShowTips" @click="isShowTips=false">
            <a-icon type="up" />
            收起详细资料
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="left">
        <a-tabs v-model="activeKey" @change="clickTabs">
          <a-tab-pane :key="index" v-for="(item, index) in tabs" :tab="item">
            Content of Tab Pane 1
          </a-tab-pane>
        </a-tabs>
        <router-view></router-view>
      </div>
<!--      这里为了方便，就不写右边的了-->
<!--      <div class="right">-->
<!--        -->
<!--      </div>-->
    </div>
  </div>
</template>

<script>

export default {
  name: 'pcFile',
  components: {

  },
  data(){
    return{
      tabs:['动态','回答','视频','提问','文章','专栏','想法','收藏','关注'],
      activeKey:0,
      isShowTips:false
    }
  },
  methods:{
    clickTabs(key){
      if(key==0){
        this.$router.push('/profile')
      }else if(key==1){
        this.$router.push('/profile/answer')
      }else if(key==2){
        this.$router.push('/profile/video')
      }else if(key==3){
        this.$router.push('/profile/ask')
      }else if(key==4){
        this.$router.push('/profile/article')
      }else if(key==5){
        this.$router.push('/profile/column')
      }else if(key==6){
        this.$router.push('/profile/idea')
      }else if(key==7){
        this.$router.push('/profile/collection')
      }else if(key==8){
        this.$router.push('/profile/following')
      }
    }
  }
}
</script>

<style scoped lang="less">
.pc-profile{
  width: 1132px;
  padding: 16px;
  box-sizing: border-box;
  .top{
    background-color: white;
    border-radius: 5px;
    box-shadow: #8590a6;
    .banner{
      width: 100%;
      height: 300px;
    }
    .avatar-and-profile{
      padding: 10px 20px;
      display: flex;
      position: relative;
      .avatar{
        position: absolute;
        top: -80px;
        width: 200px;
        height: 200px;
        border-radius: 20px;
        overflow: hidden;
      }
      .profile{
        margin-left: 250px;
        .profile1{
          display: flex;
          .name{
            font-size: 30px;
            font-weight: 700;
            color: black;
          }
          .work{
            margin-left: 20px;
            font-size: 16px;
            font-weight: 500;
          }
        }
        .profile2{
          margin: 16px 0;
          .school{
            font-size: 16px;
            i{
              margin-right: 10px;
            }
          }
        }
        .tips{
          margin-bottom: 10px;
          i{
            margin-right: 10px;
          }
        }
      }
    }
  }
  .bottom{
    margin-top: 20px;
    background-color: white;
    border-radius: 5px;
    box-shadow: #8590a6;
    padding: 16px;
  }
}
</style>
